<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/font/iconfont.css">
    <title>POI搜索次数</title>
    <style>
        .main {
            background: white;
            min-height: 490px;
            box-shadow: 1px 1px 2px #AAAAAA;
        }

        .layui-form-item .layui-input-inline {
            width: 120px;
        }

        .column {
            float: left;
            width: 20%;
            padding-left: 40px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .column div h2 {
            margin-left: 20px;
            margin-top: 1.5rem;
            font-size: 1.6rem;
        }

        .column div h3 {
            margin-left: 20px;
            padding-top: 20px;
            color: white;
            font-size: 1rem;
        }

        #top_list .layui-row {
            height: 2rem;
            line-height: 2rem;
            border-bottom: solid #eee 1px;
            border-left: solid #eee 1px;
            border-right: solid #eee 1px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body style="margin: 15px">
<p style="color: #E695C4">POI搜索次数</p>
<hr>
<div class="layui-form">
    <div class="layui-form-item" style="background: white;padding: 20px">
        <label class="layui-form-label" style="width: 30px">建筑</label>
        <div class="layui-input-inline">
            <select name="type" lay-filter="bid" id="bid">
                <option value="0">全部</option>
                <option value="10034">阿斯利康1期</option>
                <option value="10133">阿斯利康3期</option>
            </select>
        </div>

        <label class="layui-form-label" style="width: 30px">楼层</label>
        <div class="layui-input-inline">
            <select name="type" lay-filter="fid" id="fid">
                <option value="0">全部</option>
            </select>
        </div>

        <label class="layui-form-label" style="width: 30px">粒度</label>
        <div class="layui-input-inline">
            <select name="type" lay-filter="type" id="type">
                <option value="0">天</option>
                <option value="1">月</option>
            </select>
        </div>
        <label class="layui-form-label" style="width: 50px">时间段</label>
        <div class="layui-input-inline" style="width: 180px">
            <input type="text" class="layui-input" id="time" placeholder=" - ">

        </div>
        <button class="layui-btn" style="background: #F7CBE2 ; margin-left: 20px" onclick="searchDB()">查询</button>
    </div>

</div>
<div class="main">
    <div class="layui-row" style="margin-left:-40px;padding:20px ">
        <div class="column">
            <div style="background-image: url('/static/img/rank_01.png');width:12rem ;height: 7.5rem;background-size: 100% 100%">
                <h3 id="poi_01">
                </h3>
                <h2 id="num_01">
                </h2>
            </div>
        </div>
        <div class="column">
            <div style="background-image: url('/static/img/rank_02.png');width:12rem ;height: 7.5rem;background-size: 100% 100%">
                <h3 id="poi_02">
                </h3>
                <h2 id="num_02">
                </h2>
            </div>
        </div>
        <div class="column">
            <div style="background-image: url('/static/img/rank_03.png');width:12rem ;height: 7.5rem;background-size:  100% 100%">
                <h3 id="poi_03">
                </h3>
                <h2 id="num_03">
                </h2>
            </div>
        </div>
        <div class="column">
            <div style="background-image: url('/static/img/rank_04.png');width:12rem ;height: 7.5rem;background-size:  100% 100% ">
                <h3 id="poi_04">
                </h3>
                <h2 id="num_04">
                </h2>
            </div>
        </div>
        <div class="column">
            <div style="background-image: url('/static/img/rank_05.png');width:12rem ;height: 7.5rem;background-size:  100% 100% ">
                <h3 id="poi_05">
                </h3>
                <h2 id="num_05">
                </h2>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div id="main" class="layui-col-sm9"></div>
        <div id="top_list" class="layui-col-sm3"
             style="max-width:300px;padding: 20px;padding-bottom: 10px;display:flex;flex-direction: column">
            <div style="height: 2.2rem;padding-left: 20px;padding-right:0;line-height: 2.2rem;background:#fbbbdd;color: white ">
                POI搜索次数top10
            </div>
            <div class="layui-row" style=" height: 2rem;
            line-height: 2rem;
            border-bottom: solid #eee 1px ;
            vertical-align:middle;text-align:center;">
                <div class="layui-col-sm3">排名</div>
                <div class="layui-col-sm3">楼层</div>
                <div class="layui-col-sm6">房间编号</div>
            </div>
            <div style="flex:1;overflow-y: auto;overflow-x: hidden" id="toplist">

            </div>
            <div style="height: 2.2rem;padding-left: 20px;line-height: 2.2rem;background:white;border: solid #eeeeee 1px">
                <a class="layui-form-item" target="_blank" id="export">
                    <i class="iconfont icon-excel" style="color: #72B47C;margin: 5px"></i>导出
                </a>
            </div>
        </div>
    </div>
</div>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/static/layui/layui.js"></script>
<script>

  var $, ran, begin, end, laydate, myChart;
  layui.use('jquery', function () {
    $ = layui.jquery;
    $(function () {
      changeBox();
      myChart = echarts.init(document.getElementById('main'));
      myChart.setOption({
        backgroundColor: '#ffffff',
        title: {
          text: ''
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}次'
          }
        },
        series: [{
          name: '打开次数',
          type: 'line',
          data: []
        }]
      });
      window.onresize = myChart.resize;
      searchDB();
      $('#time').val(ran);
    });
  });
  window.onresize = function () {
    changeBox();
  };

  function changeBox() {
    var height = document.documentElement.clientHeight * 0.55;
    $('#main').height(height);
    $('#top_list').height(height * 0.9);
  }

  function searchDB() {
    var type = $('#type').val();
    var bid = $('#bid').val();
    var fid = $('#fid').val();
    var postData = {
      bid: bid,
      fid: fid,
      type: type,
      startDate: begin,
      endDate: end
    };
    $('#export').attr('href', '/poi_search_employ/exportExcel?x-az-token='
      + localStorage.azToken + '&type=' + type + '&bid=' + bid + '&fid=' + fid +
      '&startDate=' + postData.startDate + '&endDate=' + postData.endDate);

    $.post('/poi_search_employ/list?x-az-token='
      + localStorage.azToken, postData, function (data, status) {
      if (data.data.tops) {
        var htmlStr = '';
        for (var i = 0; i < data.data.tops.length; i++) {
          if (i < 5) {
            $('#poi_0' + (i + 1)).html(data.data.tops[i].poi_name);
            $('#num_0' + (i + 1)).html(data.data.tops[i].count + '次');
          }
          htmlStr += '<div class="layui-row"><div  class="layui-col-sm3" >' + (i + 1) + '</div> <div  class="layui-col-sm3" > F'
            + data.data.tops[i].floor_name + '</div><div  class="layui-col-sm6" >' + data.data.tops[i].poi_name + '</div></div>';

        }
        $('#toplist').html(htmlStr);
      }


      myChart.setOption({
        xAxis: {
          data: data.data.dates
        },
        series: [{
          name: '打开次数',
          data: data.data.count
        }]
      });
    })
  }

  function format(date, format) {
    var o = {
      "M+": date.getMonth() + 1, // month
      "d+": date.getDate(), // day
      "h+": date.getHours(), // hour
      "m+": date.getMinutes(), // minute
      "s+": date.getSeconds(), // second
      "q+": Math.floor((date.getMonth() + 3) / 3), // quarter
      "S": date.getMilliseconds()
      // millisecond
    };
    if (/(y+)/.test(format))
      format = format.replace(RegExp.$1, (date.getFullYear() + "")
        .substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
          : ("00" + o[k]).substr(("" + o[k]).length));
    return format;
  }

  layui.use('laydate', function () {
    laydate = layui.laydate;
    begin = new Date();
    end = new Date();
    new Date(begin.setMonth((new Date().getMonth() - 1)));
    begin = format(begin, "yyyy-MM-dd");
    end = format(end, "yyyy-MM-dd");
    ran = begin + ' - ' + end;
    laydate.render({
      elem: '#time',
      format: 'yyyy-MM-dd'
      , value: ran
      , range: true,
      done: function (value, date, endDate) {
        begin = value.split(' - ')[0];
        end = value.split(' - ')[1];
      }
    });
  });
  layui.use('form', function () {
    var form = layui.form;
    form.render();

    form.on('select(bid)', function (data) {
      var s = '';
      if (data.value === '0') {
        s += '<option value="0">全部</option>';
      } else if (data.value == 10034) {
        s += '<option value="0">全部</option>';
        s += '<option value="1">F1</option>';
        s += '<option value="2">F2</option>';
        s += '<option value="3">F3</option>';
        s += '<option value="4">F4</option>';
        s += '<option value="5">F5</option>';
      } else {
        s += '<option value="0">全部</option>';
        s += '<option value="1">L1</option>';
        s += '<option value="2">L2</option>';
        s += '<option value="3">L3</option>';
        s += '<option value="4">L4</option>';
        s += '<option value="5">L5</option>';
        s += '<option value="6">L6</option>';
        s += '<option value="7">L7</option>';
      }
      $('#fid').html(s);
      form.render('select');
    });
  });
</script>
</body>
</html>